<template>
  <el-container class="container">
    <!-- 头部模块 -->
    <el-header>
      <nav class="nav">
        <div class="logo">
          <img src="/img/logo/1_1549118301.png" alt="图片还在加载中" style="height: 50px;margin-top:5px" />
        </div>
        <div class="nav-right">
          <ul class="navUl">
            <li>
              <router-link to="/" style="color: #666; font-weight: 500px">网站首页</router-link>
            </li>

            <li>
              <router-link to="/" style="color: #666; font-weight: 500px">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    关于我们
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>公司简介</el-dropdown-item>
                    <el-dropdown-item>主营业务介绍</el-dropdown-item>
                    <el-dropdown-item>亚马逊平台优势</el-dropdown-item>
                    <el-dropdown-item>讲师团队风采</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </router-link>
            </li>

            <li>
              <router-link to="/" style="color: #666; font-weight: 500px">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    服务套餐
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>《运营高手》</el-dropdown-item>
                    <el-dropdown-item>《运营大师》</el-dropdown-item>
                    <el-dropdown-item>《运营王者》</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </router-link>
            </li>

            <li>
              <router-link to="/" style="color: #666; font-weight: 500px">联系我们</router-link>
            </li>
          </ul>
        </div>

        <div class="sm-nav" @click="changSmNav">
          <div v-if="changSmNav1 == false">
            <i class="el-icon-s-operation"></i>
          </div>
          <div v-if="changSmNav1 == true">
            <i class="el-icon-close"></i>
          </div>
        </div>
      </nav>

      <!-- 小屏幕下隐藏的内容 -->
      <div class="sm-nav-content" v-if="changSmNav1">
        <el-collapse v-model="activeNames" @change="handleChange">
          <!-- <el-collapse-item title="网站首页" name="1"></el-collapse-item> -->
          <div class="t">
            <router-link to="/">网站首页</router-link>
          </div>
          <el-collapse-item title="关于我们" name="1" class="t">
            <div class="sm-nav-item">
              <router-link to="/">公司简介</router-link>
            </div>
            <div class="sm-nav-item">
              <router-link to="/">主营业务介绍</router-link>
            </div>
            <div class="sm-nav-item">
              <router-link to="/">亚马逊平台优势</router-link>
            </div>
            <div class="sm-nav-item">
              <router-link to="/">讲师团队风采</router-link>
            </div>
          </el-collapse-item>
          <el-collapse-item title="套餐服务" name="2" class="t">
            <div class="sm-nav-item">
              <router-link to="/">《运营高手》</router-link>
            </div>
            <div class="sm-nav-item">
              <router-link to="/">《运营大师》</router-link>
            </div>
            <div class="sm-nav-item">
              <router-link to="/">《运营王者》</router-link>
            </div>
            <div class="sm-nav-item">
              <router-link to="/">讲师团队风采</router-link>
            </div>
          </el-collapse-item>
          <div class="t">
            <router-link to="/">联系我们</router-link>
          </div>
        </el-collapse>
      </div>
    </el-header>

    <el-main>
      <div class="banner">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../fixtures/sliders/t1.svg" />
            </div>
            <div class="swiper-slide">
              <img src="../fixtures/sliders/t2.svg" />
            </div>
            <div class="swiper-slide">Slide 3</div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <!--<div class="swiper-button-prev"></div>-->
          <!--<div class="swiper-button-next"></div>-->
          <!-- 如果需要滚动条 -->
          <!--<div class="swiper-scrollbar"></div>-->
        </div>
      </div>
    </el-main>
    <!-- 尾部模块 -->
    <el-footer>
      <div class="footer-nav">
        <ul>
          <p>关于我们</p>
          <li>公司简介</li>
          <li>主营业务介绍</li>
          <li>亚马逊平台优势</li>
          <li>讲师团队风采</li>
        </ul>
        <ul>
          <p>套餐服务</p>
          <li>《运营高手》</li>
          <li>《运营大师》</li>
          <li>《运营王者》</li>
        </ul>
        <ul>
          <p>联系我们</p>
        </ul>
        <ul>
          <div>
            <h2>0755-26910050</h2>
            <p>周一到周六9:00-18:00</p>
          </div>
        </ul>
      </div>
      <!-- 小屏幕下底部的导航栏 -->
      <div class="navBottom">
        <div>
          <p class="el-icon-phone"></p>
          <p>电话咨询</p>
        </div>
        <div>
          <p class="el-icon-s-shop"></p>
          <p>产品中心</p>
        </div>
        <div>
          <p class="el-icon-s-platform"></p>
          <p>客户案例</p>
        </div>
        <div>
          <p class="el-icon-user-solid"></p>
          <p>QQ客服</p>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>

export default {
  data () {
    return {
      navStyle: 'el-icon-s-operation',
      activeNames: [],//如果需要小屏幕下nav默认设置
      changSmNav1: false
    }
  },
  methods: {
    handleChange (val) {
      console.log(val);
    },
    changSmNav () {
      if (this.changSmNav1) {
        this.changSmNav1 = false
      } else {
        this.changSmNav1 = true
      }
    }
  },
  created () {

  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  list-style: none;
}
.container {
}
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown {
  display: block;
  color: #666;
  margin-bottom: 20px;
}
a:hover,
a:active,
a:visited,
a:link {
  text-decoration: none;
}

.nav {
  width: 90%;
  line-height: 60px;
  margin: auto;
  overflow: hidden;
}
.logo {
  height: 60px;
  float: left;
}
.navUl {
  overflow: hidden;
  display: block;
}
.navUl > li {
  float: left;
  margin: 0 15px;
  cursor: pointer;
}
.navUl > li:hover > a {
  color: rgb(15, 248, 178) !important;
}
.navUl > li:hover .el-dropdown {
  color: rgb(15, 248, 178) !important;
}
.nav-right {
  height: 60px;
  line-height: 60px;
  float: right;
}
.el-header {
  padding: 0 !important;
}
.sm-nav {
  float: right;
  margin-right: 30px;
  font-size: 20px;
  cursor: pointer;
  // display: none;
}
.showIcon {
  display: block;
}
.hideIcon {
  display: none;
}
.sm-nav-content {
  border-top: 1px solid gray;
  width: 100%;
  margin: 0;
  text-align: left;
  // display: none;
}
.sm-nav-content a {
  color: #666 !important;
  line-height: 20px;
  font-size: 13px;
}
.sm-nav-item {
  line-height: 35px !important;
  background-color: rgb(189, 184, 184) !important;
  padding-left: 30px;
}
@media screen and(min-width: 768px) {
  .sm-nav {
    display: none;
  }
  .navBottom {
    display: none;
  }
}
@media screen and(max-width: 767px) and(min-width: 250px) {
  .sm-nav {
    display: block;
  }
  .navUl {
    display: none;
  }
  .showIcon {
    display: inline-block !important;
  }
  .navBottom {
    display: block !important;
  }
  .el-footer {
    padding: 60px 0 !important;
  }
  .footer-nav > ul:nth-child(1) {
    width: 50%;
    margin: 0 !important;
  }
  .footer-nav > ul:nth-child(2) {
    width: 50%;
    margin: 0 !important;
  }
  .footer-nav > ul:nth-child(3) {
    width: 100%;
    margin: 0;
    margin-top: 200px;
    float: none;
    clear: both;
  }
  .footer-nav > ul:nth-child(4) {
    width: 100%;
    margin: 0;
    margin-top: 200px;
    float: none;
    // clear: both;
    margin: 20px auto;
    text-align: center;
  }
}

//
.el-main {
  height: 500px;
  z-index: -1;
}
//尾部
.el-footer {
  background-color: rgb(13, 2, 2);
  padding: 20px 40px !important;
  height: auto !important;
}
.footer-nav {
  padding: 10px 20px;
  margin: 0 auto;
  color: white;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
}
.footer-nav > ul {
  float: left;
  margin-right: 10%;
  margin-bottom: 30px;
  border: 1px solid red;
}
.footer-nav > ul:nth-child(4) {
  margin-right: 0%;
}
.footer-nav > ul > li {
  line-height: 30px;
  cursor: pointer;
  text-align: center;
}
.footer-nav > ul > p {
  line-height: 30px;
  color: tomato;
  cursor: pointer;
  text-align: center;
}
.navBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgb(125, 192, 29);
  text-align: center !important;
  overflow: hidden;
  display: none;
  padding: 5px 0;
}
.navBottom > div {
  width: 25%;
  float: left;
  cursor: pointer;
}
// @media screen and(max-width: 767px) and(min-width: 468px) {
// }
</style>
